// 参考 https://zhuanlan.zhihu.com/p/64705159
// import React, {Component, Suspense, lazy} from 'react';
// const DynamicComponent = lazy (() => import('/pages/index'));
//<Suspense fallback={<div>loading...</div>}>
//<DynamicComponent />
//</Suspense>
// react 模块

// 按需加载--lazy 懒加载  Suspense 缓显示  const 要在 import 下面
import React, { Component, Suspense, lazy } from "react";

// react路由
import { Route, Redirect, Switch } from "react-router-dom"; //   Switch 普通路由跳转
// 单个组件引入
import me from "../views/me/me"; // component 渲染 小写就可以
import H from "../views/home/home"; // 组件渲染 就可以 首字母大写
import middle from "../views/me/middle/middle"; // 组件渲染 就可以 首字母大写
import Child from "../views/child/child"; // 组件渲染 就可以 首字母大写
import Ajax from "../views/ajax/ajax"; // 组件渲染 就可以 首字母大写
import Redux from "../views/redux/redux/redux"; // 组件渲染 就可以 首字母大写
import Event from "../views/event/event"; // 组件渲染 就可以 首字母大写
import Base from "../views/base/base"; // 组件渲染 就可以 首字母大写
import Fun from "../views/fun/fun"; // 组件渲染 就可以 首字母大写

import nodata from "../views/nodata/nodata";

// import Componen from "../views/component/component";
import AnimatedSwitch from "./AnimatedSwitch/AnimatedSwitch";
// 按需导入
let Componen = lazy(() => import("../views/component/component"));


export default class RouterIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      // <Switch>
      //   {/* render 函数重新定义 */}
      //   <Route path="/" exact render={() => <Redirect to="/home" />} />
      //   {/* 类似vue 插槽模式 */}
      //   <Route path="/home">
      //     <H routes={123} />
      //   </Route>
      //   {/* 组件模式 */}
      //   <Route path="/me" component={me} />
      //   {/*  */}
      //   <Route path="/middle" component={middle}></Route>
      //   {/* 函数组件模式 */}
      //   <Route path="/child" render={() => <Child routes={123} />}></Route>
      //   {/* 函数请求 */}
      //   <Route
      //     path="/ajax"
      //     render={() => (
      //       <Ajax source="https://api.github.com/search/repositories?q=javascript&sort=stars"></Ajax>
      //     )}
      //   />
      //   <Route path="/redux" component={Redux}></Route>
      //   <Route path="/event" component={Event}></Route>

      //   <Route
      //     path="/component"
      //     render={() => (
      //       <Suspense fallback={<div>loading...</div>}>
      //         <Componen />
      //       </Suspense>
      //     )}
      //   ></Route>
      //       <Route path="/base" component={Base}></Route>
      //       <Route path="/fun" component={Fun}></Route>
      //   {/* 没有 path 可以匹配没有的数据 */}
      //   <Route component={nodata}></Route>
      // </Switch>

      <AnimatedSwitch>
        {/* render 函数重新定义 */}
        <Route path="/" exact render={() => <Redirect to="/home" />} />
        {/* 类似vue 插槽模式 */}
        <Route path="/home">
          <H routes={123} />
        </Route>
        {/* 组件模式 */}
        <Route path="/me" component={me} />
        {/*  */}
        <Route path="/middle" component={middle}></Route>
        {/* 函数组件模式 */}
        <Route path="/child" render={() => <Child routes={123} />}></Route>
        {/* 函数请求 */}
        <Route
          path="/ajax"
          render={() => (
            <Ajax source="https://api.github.com/search/repositories?q=javascript&sort=stars"></Ajax>
          )}
        />
        <Route path="/redux" component={Redux}></Route>
        <Route path="/event" component={Event}></Route>

        <Route
          path="/component"
          render={() => (
            <Suspense fallback={<div>loading...</div>}>
              <Componen />
            </Suspense>
          )}
        ></Route>
        <Route path="/base" component={Base}></Route>
        <Route path="/fun" component={Fun}></Route>
        {/* 没有 path 可以匹配没有的数据 */}
        <Route component={nodata}></Route>
      </AnimatedSwitch>
    );
  }
}
